import React, { useEffect } from "react";
import AppTitle from "../../../../../components/AppTitle"
// import AppScrollTable from "../../../../../components/AppScrollTable";
import AppScrollList from "../../../../../components/AppScrollList";
import { onOption1, onOption2, onOption3 } from "./data";
// import AppEmpty from "../../../../../components/AppEmpty";

import "./index.less";
import { useState } from "react";

const App = (props) => {

  const value = props.value || "1";

  const title = value === "1" ? "超时工单预警（24h未派单处理）": 
                value === "2" ? "最热话题排行 TOP10": 
                value === "3" ? "物业服务评价  近7天": ""

  const [columns, setColumns] = useState([])
  const [dataSource, setDataSource] = useState([])

  useEffect(() => {
    info()
  // eslint-disable-next-line
  }, [props.value])

  const info = () => {

    const dataSource = [];
    for (let i = 0; i < 12; i++) {
      dataSource.push({
        key: i,
        name: `Edward King ${i}`,
        age: 32,
        address: `London, Park Lane no. ${i}`,
      });
    }

    if(value === "1") {

      const options = onOption1();
      setColumns(options);
      setDataSource(dataSource)

    } else if(value === "2") {

      const options = onOption2();
      setColumns(options)
      setDataSource(dataSource)

    } else if(value === "3") {

      const options = onOption3();
      setColumns(options)
      setDataSource(dataSource)

    }
  }

  return (
    <div className="left-down">
      <AppTitle title={title} /> 
      {/* <AppEmpty height={200} /> */}
      <AppScrollList 
        list={dataSource} 
        columns={columns} 
      />
      {/* <div style={{ height: 205 }}> 
        <AppScrollTable
          dataSource={dataSource} 
          columns={columns} 
        />
      </div> */}
    </div>
  );
}

export default App;


